<div class="layout layout-row layout-wrap" layout="row" layout-align="space-around center">
    <md-toolbar class="md-accent" layout="row" layout-align="start center">
        <div ng-include="'app/layout/BackButton.html'"></div> <!--ng-if="vm.ShowControls"-->
        <h3 class="marginleft20">{{vm.ReferralPractice}}</h3>
    </md-toolbar>
</div>

<div class="layout-fill" layout="column" layout-align="space-around stretch" style="padding:10px;">
    <md-grid-list md-cols="1" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="4"
                    md-row-height="450px"
                    md-gutter="8px" md-gutter-gt-sm="12px"
                    class="PatientList" flex>
        <md-grid-tile ng-repeat="Patient in vm.PatientList"
                        md-rowspan="1"
                        md-colspan="1"
                        md-colspan-sm="1"
                        md-colspan-xs="1"
                        layout-align="start stretch">

            <md-card class="md-whiteframe-9dp patientCard layout-fill">
                <md-toolbar class="md-hue-2 md-primary">
                    <div layout="row" flex>
                        <p flex class="patientHeader">{{Patient.LastName}}, {{Patient.FirstName}}</p>
                        <div layout="row" layout-align="end center">
                            
                            <md-button class="md-icon-button" ng-click="vm.DeleteReferral(Data.ReferralID)" aria-label="Edit">
                                <md-tooltip>Delete Referral</md-tooltip>
                                <md-icon md-font-library="material-icons">&#xE92B;</md-icon>
                                <!--<i class="material-icons">&#xE5D2;</i>-->
                                <!--<ng-md-icon icon="menu"></ng-md-icon>-->
                            </md-button>

                            <md-button class="md-icon-button" ng-click= "vm.EditReferral('')" aria-label="Edit"> <!--ng-click="vm.ShowPatDemo(Data.ReferralID)" -->
                                <md-tooltip>Edit</md-tooltip>
                                <md-icon md-font-library="material-icons">&#xE3C9;</md-icon>
                                <!--<i class="material-icons">&#xE5D2;</i>-->
                                <!--<ng-md-icon icon="menu"></ng-md-icon>-->
                            </md-button>
                        </div>
                    </div>
                    
                </md-toolbar>
                
                <md-card-content>
                    <div flex layout="row" class="PatientCardRow" layout-align="space-around">
                        <span class="patientCardHeader">Date of Birth:</span>
                        <span flex>{{Patient.DOB}}</span>
                    </div> 
                    <md-divider></md-divider>
                    <div flex layout="row" class="PatientCardRow" layout-align="space-around">
                        <div layout="column" flex>
                            <div layout="row">
                                <span class="patientCardHeader">Daignosis:</span>
                                <span flex>{{Patient.DiagnosisCount}} ({{Patient.ShortDiagnosis}})</span>
                            </div>
                        </div>
                    </div> 
                    <md-divider></md-divider>
                    <div flex layout="row" class="PatientCardRow" layout-align="space-around">
                        <div layout="column" flex>
                            <div layout="row">
                                <span class="patientCardHeader">Reason For Referral:</span>
                            </div>
                            <div layout="row">
                                <span flex>{{Patient.ReferralReason}}</span>
                            </div>
                        </div>
                    </div> 
                    <md-divider></md-divider>
                    <div flex layout="row" class="PatientCardRow" layout-align="space-around">
                        <div layout="column" flex>
                            <div layout="row">
                                <span class="patientCardHeader">Referred By:</span>
                                <span flex>{{Patient.RequestedBy}}</span>
                            </div>
                        </div>
                    </div> 
                    <md-divider></md-divider>
                    <div flex layout="row" class="PatientCardRow" layout-align="space-around">
                        <div layout="column" flex>
                            <div layout="row">
                                <span class="patientCardHeader">Consulted By:</span>
                                <span flex>{{Patient.ReferredPhyisician}}</span>
                            </div>
                        </div>
                    </div> 
                </md-card-content>
                <md-card-footer>
                    <md-divider></md-divider>
                    <md-card-actions layout="row" layout-align="space-around center">

                        <md-button class="md-accent md-fab md-mini" aria-label="info">
                            <md-icon md-font-library="material-icons">&#xE88F;</md-icon>
                            <md-tooltip>Referral Infomation</md-tooltip>
                        </md-button>
                        <md-button class="md-accent md-fab md-mini" ng-click="vm.EditReferral('Attachments')"  aria-label="info">
                            <md-icon md-font-library="material-icons">&#xE148;</md-icon>
                            <md-tooltip>Add Attachments</md-tooltip>
                        </md-button>

                        <md-button class="md-accent md-fab md-mini" ng-click="vm.EditReferral('Diagnosis')" aria-label="info">
                            <md-icon md-font-library="material-icons">&#xE85D;</md-icon>
                            <md-tooltip>Edit Diagnosis</md-tooltip>
                        </md-button>
                        <md-button class="md-accent md-fab md-mini" ng-click="vm.CloneReferral(Data.ReferralID)" aria-label="Edit">
                            <md-tooltip>Clone Referral</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE8D3;</md-icon>
                        </md-button>
                        <md-button class="md-accent md-fab md-mini" ng-click="vm.ProcessReferral(Data.ReferralID)"  aria-label="info">
                            <md-icon md-font-library="material-icons">&#xE877;</md-icon>
                            <md-tooltip>Process Referral</md-tooltip>
                        </md-button>
                    </md-card-actions>
                </md-card-footer>
            </md-card>
        </md-grid-tile>
    </md-grid-list>
</div>